<template>
	<!-- 选择到达站页 -->
	<view class="stations_depart">
		<!-- 搜索框 S -->
		<view class="seach_wraper"><my-search placeholder="请输入到达站点" :value="keyword" :border="true" maxlength="30" @change="onInput"></my-search></view>
		<!-- 搜索框 E -->
		<!-- 车站列表 S -->
		<view class="list_station" v-if="stationList.length && !getStationLoading"><index-list :data="stationList" :keyword="keyword" @selected="selectStation"></index-list></view>
		<view v-else class="loading"><my-loading @refresh="refresh" :loading-type="loadingType" :loading-text="loadingText" :refresh-btn="refreshBtn"></my-loading></view>
		<!-- 车站列表 N -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
// components
import indexList from '@/components/indexList/indexList.vue';
import mySearch from '@/components/mySearch/mySearch.vue';
import myLoading from '@/components/myLoading/myLoading.vue';
// api
import { $saleStationsDest } from '../../service/index';
// untils
import { myShowToast, myShowModal } from '../../utils/utils.js';
export default {
	components: { mySearch, indexList, myLoading },
	data() {
		return {
			keyword: '', // 输入框内容
			city: '', // 出发城市
			stationList: [], // 车站列表
			loadingType: 'no_trips',
			loadingText: '',
			getStationLoading: false,
			refreshBtn: false,
			timer: 0
		};
	},
	computed: mapState(['info', 'stationStart']),
	watch: {},
	methods: {
		...mapMutations(['cancelRequest', 'updateStationEnd']),
		// 输入框输入
		onInput(value) {
			this.timer && clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.keyword = value;
			}, 800);
		},
		// 选择出发站点
		selectStation(item) {
			this.updateStationEnd(item); // 更新到达站点信息
			uni.navigateBack({
				// 回退首页
				delta: 2
			});
		},
		// 获取到达车站列表
		getStationLists() {
			if (this.getStationLoading) {
				return;
			}
			this.getStationLoading = true;
			$saleStationsDest({
				mechNo: this.stationStart.merchantNo
			})
				.then(res => {
					const data = res.data;
					this.getStationLoading = false;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						this.loadingText = '未查询到车站信息';
						this.refreshBtn = true;
						return;
					}
					// 未查询到车站信息
					if (!data.content || !data.content.length) {
						this.loadingText = '未查询到车站信息';
						this.refreshBtn = true;
					} else {
						this.stationList = data.content;
					}
				})
				.catch(err => {
					this.loadingType = 'no_network';
					this.loadingText = '哎呀，网络出错了';
					this.getStationLoading = false;
					this.refreshBtn = true;
					console.log('$saleStationsDest-err:', err);
				});
		},
		// 重新请求列表
		refresh() {
			this.getStationLists();
		}
	},
	onLoad(options) {
		this.city = options.start; // 出发城市
		this.getStationLists(); // 获取车站列表
	},
	onHide() {
		this.timer && clearTimeout(this.timer);
	},
	onUnload() {
		this.timer && clearTimeout(this.timer);
	}
};
</script>

<style lang="scss" scoped>
.stations_depart {
	.seach_wraper {
		position: fixed;
		top: 0;
		width: 690rpx;
		background-color: #ffffff;
		padding: 24rpx 30rpx 48rpx 30rpx;
		z-index: 1000;
	}
	.list_station {
		margin-top: 152rpx;
	}
}
</style>
